<template>
  <div class="auto-relation-field-condition">
    <div class="auto-relation-field-condition-item" v-for="(item, index) in fieldQuerys">
      <a-select @change="() => leftFieldChange(item)"
                placeholder="请选择字段" v-model="item.sourceFormField"
                class="auto-relation-field-condition-item-field">
        <a-select-option v-for="item in getFieldLeftConfigs(item)" :value="item.id">
          {{ getFieldLabel(item) }}
        </a-select-option>
      </a-select>
      <div style="margin: 0 5px">=</div>
      <a-select
                placeholder="请选择字段" v-model="item.targetFormField"
                class="auto-relation-field-condition-item-field">
        <a-select-option v-for="item in getFieldRightConfigs(item)" :value="item.id">
          {{ getFieldLabel(item) }}
        </a-select-option>
      </a-select>

      <a-button @click="() => addNew(index)" style="margin-left: 5px" icon="plus" size="small" shape="circle"/>
      <a-button @click="() => remove(index)" style="margin-left: 5px" icon="minus" size="small" shape="circle"/>
    </div>
  </div>
</template>
<script>
import {createProps} from '@/utils';
import {createAuto, createAutoRelationQuery, createRelation} from '@comp/hhd/design/relation/types';
import {
  createFormDefinition, fieldCanMapping,
  getAllFields,
  getFormByFieldId,
  getFormFieldById
} from '@comp/hhd/design/FormDesigner/types';

export default {
  name: 'AutoRelationFieldCondition',
  props: {
    autoRelation: createProps(Object, createAuto),
    sourceFormDefinition: createProps(Object, createFormDefinition),
    targetFormDefinition: createProps(Object, createFormDefinition),
    relation: createProps(Object, createRelation),
  },
  methods: {
    createEmptyFieldConfigs() {
      return [createAutoRelationQuery()];
    },
    leftFieldChange(fieldQuery) {
      this.$nextTick(() => {
        let formDefinition = getFormByFieldId(this.sourceFormDefinition, fieldQuery.sourceFormField);
        fieldQuery.sourceFormId = formDefinition.id;
        this.fieldQuerys.splice(0, 0);
        this.resolveRelationFieldBinds();
      });
    },
    resolveRelationFieldBinds() {
      let sourceFormIds = this.fieldQuerys.map(item => item.sourceFormId);
      let fieldBinds = this.relation && this.relation.auto && this.relation.auto.fieldBinds || [];
      fieldBinds.forEach(fieldBind => {
        if (!sourceFormIds.includes(fieldBind.sourceFormId)) {
          fieldBind.sourceFormId = undefined
          fieldBind.sourceFieldId = undefined
        }
      })
    },
    getFieldLeftConfigs(fieldQuery) {
      let res = [];
      let sourceFormIds = [...new Set(this.fieldQuerys.filter(i => i !== fieldQuery).map(item => item.sourceFormId).filter(i => !!i))];
      getAllFields(this.sourceFormDefinition).forEach((fieldConfig) => {
        if (fieldConfig) {
          if (fieldConfig.formId === this.sourceFormDefinition.id
            || sourceFormIds.includes(fieldConfig.formId)
            || sourceFormIds.length <= 0
            || (sourceFormIds.length === 1 && sourceFormIds[0] === this.sourceFormDefinition.id)) {

            let rightField = getFormFieldById(this.targetFormDefinition, fieldQuery.targetFormField);
            if (!rightField || fieldCanMapping(rightField, fieldConfig)) {
              res.push(fieldConfig);
            }
          }
        }
      });
      return res;
    },
    getFieldLabel(fieldConfig) {
      let formDeinition = getFormByFieldId(this.sourceFormDefinition, fieldConfig.id)
        || getFormByFieldId(this.targetFormDefinition, fieldConfig.id)
      let formName = formDeinition.formName
      if (formName === this.sourceFormDefinition.formName
        || formName === this.targetFormDefinition.formName) {
        formName = '主表'
      }
      return `[${formName}] ${fieldConfig && fieldConfig.label}`;
    },
    getFieldRightConfigs(item) {
      let res = [];
      getAllFields(this.targetFormDefinition).forEach((fieldConfig) => {
        if ((this.relation.relationTargetInnerFormId + '').indexOf(fieldConfig.formId) !== -1) {
          let leftField = getFormFieldById(this.sourceFormDefinition, item.sourceFormField)
          if (leftField && fieldConfig && fieldCanMapping(leftField, fieldConfig)) {
            res.push(fieldConfig);
          } else if(!leftField) {
            res.push(fieldConfig);
          }
        }
      })
      return res;
    },
    addNew(index) {
      this.autoRelation.autoRelationQuery.splice(index + 1, 0, createAutoRelationQuery());
    },
    remove(index) {
      this.autoRelation.autoRelationQuery.splice(index, 1);
    },
  },
  computed: {
    fieldQuerys: {
      get() {
        if (this.autoRelation && this.autoRelation.autoRelationQuery.length && this.autoRelation.autoRelationQuery) {
          return this.autoRelation.autoRelationQuery;
        }
        this.autoRelation.autoRelationQuery = this.createEmptyFieldConfigs();
        return this.autoRelation.autoRelationQuery;
      },
      set(v) {
        this.autoRelation.autoRelationQuery = v;
      },
    }
  }
};
</script>
<style>
.auto-relation-field-condition-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}

.auto-relation-field-condition-item-field {
  flex: 1;
}
</style>